<template>
	<view class="visitSituation">
		<view class="visitSituation-top">
			<u--input border="bottom" placeholder="请输入要查询的内容"></u--input>
			<picker style="background-color: #ff6600;color: #fff;padding: 10rpx;border-radius: 10rpx;" mode="selector"
				:range="visitNames" :value="selectedVisitIndex" @change="handleVisitChange">
				<view style="display: flex;align-items: center;">{{visitList[selectedVisitIndex].text}}
					<u-icon name="arrow-down" size="18" color="#fff"></u-icon>
				</view>
			</picker>
		</view>
		<view>
			<view class="visitSituation-se" style="margin: 30rpx 0;">
				<text style="color: #ffaa7f;">{{selectedVisit.text}}</text>
			</view>
			<view class="creator">
				<view class="information" v-for="(item, index) in getCurrentList" :key="index" @click="goAuthor()">
					<image :src="`/static/${item.img}`" mode="aspectFill" class="information-img">
					</image>
					<view class="text-content">
						<!-- #ifdef H5 -->
						<view class="text-con" style="display: flex;">
							<text class="name">{{item.name}}</text>
							<u-icon class="ses-icon" color="#fff"
								:class="{'icon-man': item.sex === 'man', 'icon-woman': item.sex === 'woman'}"
								:name="item.sex" size="13"></u-icon>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<view style="display: flex;align-items: center;justify-content:space-between;">
							<text class="name">{{item.name}}</text>
							<view style="width: 23rpx;height: 23rpx;"
								:class="{'icon-man': item.sex === 'man', 'icon-woman': item.sex === 'woman'}">
								<u-icon class="ses-icon" color="#fff" :name="item.sex" size="13"></u-icon>
							</view>
						</view>
						<!-- #endif -->
						<text class="gq">{{item.gq}}</text>
					</view>
					<view>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				creatorList: [{
						name: '牢大',
						gq: "开心每一天",
						img: 'kbblnt.jpg',
						sex: 'man',
						visitTime: '2023-10-11',
					}, {
						name: '沈月',
						gq: "开心每一天",
						img: 'sy.jpg',
						sex: 'woman',
						visitTime: '2023-10-11',
					},
					{
						name: '沈月',
						gq: "开心每一天",
						img: 'sy.jpg',
						sex: 'woman',
						visitTime: '2023-10-11',
					},
					{
						name: '沈月',
						gq: "开心每一天",
						img: 'sy.jpg',
						sex: 'woman',
						visitTime: '2024-10-11',
					},
					{
						name: '沈月',
						gq: "开心每一天",
						img: 'sy.jpg',
						sex: 'woman',
						visitTime: '2024-10-11',
					},
					{
						name: '沈月',
						gq: "开心每一天",
						img: 'sy.jpg',
						sex: 'woman',
						visitTime: '2024-10-11',
					},
					{
						name: '沈月',
						gq: "开心每一天",
						img: 'sy.jpg',
						sex: 'woman',
						visitTime: '2024-10-11',
					},
					{
						name: '沈月',
						gq: "开心每一天",
						img: 'sy.jpg',
						sex: 'woman',
						visitTime: '2024-10-11',
					},
					{
						name: '沈月',
						gq: "开心每一天",
						img: 'sy.jpg',
						sex: 'woman',
						visitTime: '2024-10-11',
					},
					{
						name: '沈月',
						gq: "开心每一天",
						img: 'sy.jpg',
						sex: 'woman',
						visitTime: '2024-10-11',
					},
				],
				visitList: [{
						text: '最近31天解锁总人数'
					},
					{
						text: '历史解锁总人数'
					},
					{
						text: '主页访问次数'
					},
					{
						text: '主页访问人数'
					}
				],
				selectedVisitIndex: 0, // 默认选中第一个
				currentDate: new Date(), // 当前日期
				displayList: 'filtered', // 默认显示filteredCreatorList
			}
		},
		// #ifdef MP-WEIXIN

		// #endif
		computed: {
			visitNames() {
				return this.visitList.map(item => item.text);
			},
			selectedVisit() {
				return this.visitList[this.selectedVisitIndex];
			},
			filteredCreatorList() {
				// 筛选出近31天的数据
				const thirtyOneDaysAgo = new Date(this.currentDate);
				thirtyOneDaysAgo.setDate(this.currentDate.getDate() - 31);
				return this.creatorList.filter(item => new Date(item.visitTime) >= thirtyOneDaysAgo);
			},
			// 计算属性，返回所有历史数据
			allHistoricalCreatorList() {
				return this.creatorList;
			},
			recentUnlockCount() {
				return this.filteredCreatorList.length; // 近31天解锁总人数
			},
			historicalUnlockCount() {
				return this.creatorList.length; // 历史解锁总人数
			},
			getCurrentList() {
				if (this.displayList === 'filtered') {
					return this.filteredCreatorList;
				} else if (this.displayList === 'all') {
					return this.allHistoricalCreatorList;
				}
				return []; // 默认返回空数组
			},
		},
		methods: {
			goAuthor() {
				// ...
			},
			handleVisitChange(e) {
				this.selectedVisitIndex = e.detail.value; // 使用e.detail.value获取选中的值
				// 更新visitList中的人数统计
				this.updateVisitCounts();
			},
			updateVisitCounts() {
				if (this.selectedVisitIndex === 0) {
					this.visitList[0].text = `最近31天解锁总人数: ${this.recentUnlockCount}`;
				} else if (this.selectedVisitIndex === 1) {
					this.visitList[1].text = `历史解锁总人数: ${this.historicalUnlockCount}`;
				}
			},
			handleVisitChange(event) {
				const newIndex = event.detail.value;
				this.selectedVisitIndex = newIndex;
				if (newIndex === 0) {
					this.displayList = 'filtered'; // 显示近31天的数据
				} else if (newIndex === 1) {
					this.displayList = 'all'; // 显示所有历史数据
				}
				this.updateVisitCounts(); // 更新显示的文本
			},
		},
		watch: {
			selectedVisitIndex() {
				this.updateVisitCounts(); // 当selectedVisitIndex变化时更新人数统计
			},
		}
	}
</script>

<style>
	page {}

	.visitSituation {
		width: 95%;
		margin: auto;
	}

	.creator {
		width: 90%;
		margin: auto;
	}

	.information {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 92%;
		padding: 30rpx;
		margin: 20rpx auto;
		border-bottom: 1px solid #ccc;
	}

	.information-img {
		width: 125rpx;
		height: 125rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.text-content {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		align-items: start;
		margin-left: 20rpx;
	}

	/* #ifdef MP-WEIXIN */
	.icon-man .u-icon__icon::after {
		background-color: #007bff;
		border-radius: 50%;
		margin: 20rpx 0;
		/* 男性背景颜色 */
	}

	.icon-woman .u-icon__icon::after {
		background-color: #e83e8c;
		border-radius: 50%;
		margin: 20rpx 0;
		/* 女性背景颜色 */
	}

	.icon-man,
	.icon-woman {
		border-radius: 50%;
	}

	/* #endif */
	.name {
		margin-right: 10rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.ses-icon {
		background-color: #5500ff;
		border-radius: 50%;
		margin: 20rpx;
		display: inline-block;
	}

	.gq {
		font-size: 28rpx;
		color: #666;
	}


	.icons {
		width: 175rpx;
		background-color: #fff1e8;
		border-radius: 30rpx;
		text-align: center;
		font-size: 24rpx;
		height: 53rpx;
		line-height: 53rpx;
		color: #ea8a19;
		font-weight: 600;
	}

	.icon-man {
		background-color: #007bff;
		/* 男性背景颜色 */
	}

	.icon-woman {
		background-color: #e83e8c;
		/* 女性背景颜色 */
	}

	.visitSituation-top {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		align-items: center;

	}
</style>